<template>
  <div class="mid" id="mid">
    <div class="accountpart ordermove" id="jp">
      <div style="height: 50px">
        <h1>
          <center>订单信息</center>
        </h1>
      </div>
      <el-row :gutter="16">
        <el-col :span="8" :offset="8" style="margin-top: 15px">
          <el-input placeholder="请输入内容" v-model="input">
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="searchOrder()"
            ></el-button>
          </el-input>
        </el-col>
      </el-row>

      <div class="el-table-div">
        <el-table :data="orderData" height="250" border style="width: 100%">
          <el-table-column prop="orderId" label="订单号" width="150">
          </el-table-column>
          <el-table-column prop="username" label="买家" width="150">
          </el-table-column>
          <el-table-column prop="totalPrice" label="总价" width="150">
          </el-table-column>
          <el-table-column prop="orderDate" label="订单日期"> </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: "",
      orderData: [
        {
          orderId: 1024,
          totalPrice: 93.5,
          orderDate: 1605456000000,
          username: "j2ee",
        },
        {
          orderId: 1025,
          totalPrice: 287.0,
          orderDate: 1605456000000,
          username: "j2ee",
        },
        {
          orderId: 1025,
          totalPrice: 287.0,
          orderDate: 1605456000000,
          username: "j2ee",
        },
        {
          orderId: 1025,
          totalPrice: 287.0,
          orderDate: 1605456000000,
          username: "j2ee",
        },
        {
          orderId: 1025,
          totalPrice: 287.0,
          orderDate: 1605456000000,
          username: "j2ee",
        },
        {
          orderId: 1025,
          totalPrice: 287.0,
          orderDate: 1605456000000,
          username: "j2ee",
        },
        {
          orderId: 1025,
          totalPrice: 287.0,
          orderDate: 1605456000000,
          username: "j2ee",
        },
        {
          orderId: 1025,
          totalPrice: 287.0,
          orderDate: 1605456000000,
          username: "j2ee",
        },
        {
          orderId: 1025,
          totalPrice: 287.0,
          orderDate: 1605456000000,
          username: "j2ee",
        },
        {
          orderId: 1025,
          totalPrice: 287.0,
          orderDate: 1605456000000,
          username: "j2ee",
        },
      ],
    };
  },
};
</script>

<style scoped>
.mid {
  height: 100vh;
  width: 100vw;
}
.accountpart {
  width: 1200px;
  height: 600px;
  margin-top: 30px;
  justify-content: center;
  overflow: hidden;
  opacity: 0.9;
  border-radius: 50px;
  animation: loadbac 1s linear;
  transition: 1s ease 0.2s;
  backdrop-filter: blur(5px);
  box-shadow: 0 0 15px rgb(83, 103, 110);
  background: rgba(71, 142, 175, 0.2);
  border-radius: 15px;

  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.search-div {
  position: absolute;
}
.el-table-div {
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.el-search-div {
  position: absolute;
  width: 50%;
  height: 200px;
}

/* 加载上浮动画 打关键帧 */
@keyframes ordermoveload {
  0% {
    opacity: 0;
    margin-top: 100px;
  }

  100% {
    opacity: 1;
    margin-top: 30px;
  }
}

.ordermove {
  animation: ordermoveload 1s linear;
}
</style>
